<template>
  <view class="login-page">
    <!-- 顶部标题区 -->
    <view class="login-header">
      <text class="login-title">登录</text>
    </view>

    <!-- 表单区域 -->
    <view class="login-form">
      <!-- 用户名输入框 -->
      <view class="form-item">
        <text class="form-label">用户:</text>
        <input 
          class="form-input" 
          v-model="username" 
          placeholder="请输入用户名" 
          placeholder-style="color:#999"
          @input="clearError"
        />
      </view>

      <!-- 密码输入框 -->
      <view class="form-item">
        <text class="form-label">密码:</text>
        <input 
          class="form-input" 
          v-model="password" 
          type="password" 
          placeholder="请输入密码" 
          placeholder-style="color:#999"
          @input="clearError"
        />
      </view>

      <!-- 错误提示 -->
      <text class="error-tip" v-if="showError">{{ errorMsg }}</text>

      <!-- 功能按钮区（登录/注册/重置） -->
      <view class="btn-group">
        <button class="login-btn" @click="handleLogin">登录</button>
        <button class="register-btn" @click="goToRegister">注册</button>
        <button class="reset-btn" @click="handleReset">重置</button>
      </view>
    </view>

    <!-- 底部返回入口 -->
    <view class="back-link" @click="goBack">
      <text class="back-text">返回“我的”页面</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: 'ld', // 默认填充用户名
      password: '123456', // 默认填充密码
      showError: false, // 是否显示错误提示
      errorMsg: '' // 错误提示内容
    };
  },
  methods: {
    // 登录逻辑（核心：状态存储 + 上一页刷新）
    handleLogin() {
      // 1. 输入校验
      if (!this.username.trim()) {
        this.showError = true;
        this.errorMsg = '请输入用户名';
        return;
      }
      if (!this.password.trim()) {
        this.showError = true;
        this.errorMsg = '请输入密码';
        return;
      }

      // 2. 模拟登录请求
      uni.showLoading({ title: '登录中...' });
      setTimeout(() => {
        // 登录成功条件：用户名=ld，密码=123456
        if (this.username === 'ld' && this.password === '123456') {
          // 存储登录状态（token + 用户名）
          uni.setStorageSync('userToken', 'mock_token_123456');
          uni.setStorageSync('username', this.username);
          
          uni.hideLoading();
          uni.showToast({ title: '登录成功' });
          
          // 更新底部TabBar文字为“我的”（匹配PPT Tips1）
          uni.setTabBarItem({
            index: 3, // “我的”在TabBar第4位（索引3）
            text: '我的'
          });
          
          // 关键：获取上一页（Mine页面）实例，调用刷新方法同步状态
          const pages = getCurrentPages();
          if (pages.length > 1) {
            const prevPage = pages[pages.length - 2];
            prevPage.$vm.refreshLoginStatus();
          }
          
          // 返回“我的”页面
          uni.navigateBack({ delta: 1 });
        } else {
          // 登录失败
          uni.hideLoading();
          this.showError = true;
          this.errorMsg = '用户名或密码错误，请重试';
        }
      }, 1000);
    },

    // 跳转注册页面（注册页需自行创建，路径可调整）
    goToRegister() {
      uni.navigateTo({
        url: "/pages/NewsTaBar/mine/register/register"
      });
    },

    // 重置表单
    handleReset() {
      this.username = '';
      this.password = '';
      this.showError = false;
      this.errorMsg = '';
    },

    // 输入时清除错误提示
    clearError() {
      if (this.showError) {
        this.showError = false;
        this.errorMsg = '';
      }
    },

    // 返回上一页
    goBack() {
      uni.navigateBack({ delta: 1 });
    }
  },
  onLoad() {
    // 页面加载时校验：若已登录，直接返回“我的”页面
    const hasToken = uni.getStorageSync('userToken');
    if (hasToken) {
      uni.showToast({ title: '已登录' });
      setTimeout(() => {
        uni.navigateBack({ delta: 1 });
      }, 1000);
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.login-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 60rpx 30rpx;
  box-sizing: border-box;
}

/* 顶部标题 */
.login-header {
  text-align: center;
  margin-bottom: 80rpx;
}
.login-title {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
}

/* 表单容器 */
.login-form {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 2rpx 15rpx rgba(0, 0, 0, 0.05);
}

/* 表单项（用户名/密码） */
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 15rpx;
}
.form-label {
  font-size: 28rpx;
  color: #333;
  width: 120rpx;
}
.form-input {
  flex: 1;
  font-size: 26rpx;
  color: #333;
  padding: 10rpx 0;
}

/* 错误提示 */
.error-tip {
  display: block;
  font-size: 22rpx;
  color: #DD524D;
  margin: -20rpx 0 30rpx 120rpx;
}

/* 按钮组 */
.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}
.login-btn {
  width: 30%;
  height: 70rpx;
  background-color: #DD524D;
  color: #fff;
  font-size: 24rpx;
  border-radius: 35rpx;
}
.register-btn, .reset-btn {
  width: 30%;
  height: 70rpx;
  background-color: #fff;
  color: #333;
  border: 1rpx solid #ddd;
  font-size: 24rpx;
  border-radius: 35rpx;
}
.login-btn::after, .register-btn::after, .reset-btn::after {
  border: none;
}

/* 底部返回链接 */
.back-link {
  text-align: center;
  margin-top: 60rpx;
}
.back-text {
  font-size: 24rpx;
  color: #666;
  text-decoration: underline;
}
</style>